<!--
   Web前端三大核心技术
   HTML(HyperText Markup Language)： 
    用于构建网页结构的标记型语言(骨骼)
   CSS(Cacading Style Sheet):
    用于对网页结构进行美化的描述型语言(肉身外貌) 
   JS(JavaScript):
    用于制作网页的特效，以及动态效果的脚本程序设计语言(灵魂) 
-->
<!-- 文档类型定义：表示当前文档是一个html5的页面 -->
<!doctype html>
<html>
    <!-- 页面的头部:设置页面编码，缓存信息，SEO配置信息，标题等 -->
    <head>
        <meta charset="utf-8">
        <title>跳动爱心</title>
        <style>
            /* 
            CSS由选择器和属性属性值构成，使用原理：
            1.使用选择器选中元素
            2.对选中的元素使用内置的属性和属性值进行装饰
            类选择器
             */
            .c1,
            .c2,
            .c3{
                width:200px;
                height: 200px;
                background:#f00;
                border-radius:100px;
                box-shadow:0 0 50px #f00;
            } 
            .c3{
                margin-top:-200px;
                border-radius:0; /*去除边框半径*/
            }
            .c2{
                /* margin-top:-100px;
                margin-left:-100px; */
                margin:-100px 0 0 -100px;
            }
            /* id选择器 */
            #love{
                position:absolute;/*子绝父相*/
                left:40%;
                top:20%;
                transform:rotate(45deg); /*顺时针旋转45度*/
                animation:love .2s linear infinite;
            }

            /* 创建自定义动画 css3新增 */
            @keyframes love{
                30%{
                    transform: scale(1.1) rotate(45deg);
                }
                50%{
                    transform: scale(1.2) rotate(45deg);
                }
                60%{
                    transform: scale(1.3) rotate(45deg);
                }
                70%{
                    transform: scale(1) rotate(45deg);
                }
            }
        </style>
    </head>
    <body>
        <!-- emmet快捷html结构创建指令 -->
        <!-- div#love>div.c$*3 -->
        <div id="love">
            <div class="c1"></div>
            <div class="c2"></div>
            <div class="c3"></div>
        </div>
    </body>
</html>